<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目严重精神障碍患者随访服务记录表</span>
    </div>
    <el-form :model="form" label-width="140px" label-position="left">
      <el-divider content-position="left">编号</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访时间">
            <el-date-picker
              v-model="form.followDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访方式">
            <el-select v-model="form.monthAge" style="width: 100%">
              <el-option
                v-for="item in monthAge"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>



      <el-divider content-position="left">若失访*</el-divider>
      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="原因">
            <el-select v-model="form.cause" style="width: 100%">
              <el-option
                v-for="item in cause"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="其他" v-if="[5].includes(form.cause)">
            <el-input v-model="causeContent"></el-input>
          </el-form-item>


        </el-col>
      </el-row>



      <el-divider content-position="left">若死亡*</el-divider>

      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="死亡日期">
              <el-date-picker
                v-model="form.deathDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>

        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="死亡原因">
            <el-select v-model="form.deathCause" style="width: 100%">
              <el-option
                v-for="item in deathCause"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="其他" v-if="[6].includes(form.cause)">
            <el-input v-model="deathCauseContent"></el-input>
          </el-form-item>

        </el-col>

      </el-row>
      <el-row :gutter="20">


        <el-col :lg="12" :xl="12">
          <el-form-item label="死亡原因躯体疾病">
            <el-select v-model="form.somatopathy" style="width: 100%">
              <el-option
                v-for="item in somatopathy"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="危险评估">
            <el-select v-model="form.assessment" style="width: 100%">
              <el-option
                v-for="item in assessment"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="症状及体征" >
              <el-select v-model="form.oomatogenesis" style="width: 100%">
                <el-option
                  v-for="item in oomatogenesis"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="其他" v-if="[12].includes(form.oomatogenesis)">
            <el-input v-model="oomatogenesisContent"></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="自知力">
            <el-select v-model="form.insight" style="width: 100%">
              <el-option
                v-for="item in insight"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>




      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="睡眠情况">
            <el-select v-model="form.sleepQuality" style="width: 100%">
              <el-option
                v-for="item in sleepQuality"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="饮食情况">
            <el-select v-model="form.diet" style="width: 100%">
              <el-option
                v-for="item in sleepQuality"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="个人生活料理">
            <el-select v-model="form.Personal" style="width: 100%">
              <el-option
                v-for="item in sleepQuality"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="家务劳动">
            <el-select v-model="form.housework" style="width: 100%">
              <el-option
                v-for="item in sleepQuality"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="生产劳动及工作">
            <el-select v-model="form.productive" style="width: 100%">
              <el-option
                v-for="item in sleepQualityList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="学习能力">
            <el-select v-model="form.learning" style="width: 100%">
              <el-option
                v-for="item in sleepQuality"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="社会人际交往">
            <el-select v-model="form.interpersonal" style="width: 100%">
              <el-option
                v-for="item in sleepQuality"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :lg="12" :xl="12" >
          <el-form-item label="危险行为">
            <el-select
              v-model="form.dangerous"
              style="width: 100%"
              multiple @change="seChangeDangerous"
            >
              <el-option
                v-for="item in dangerous"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="轻度滋事" v-if="showOne">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showOne"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


          <el-form-item label="肇事" v-if="showTwo">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showTwo"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


          <el-form-item label="肇祸" v-if="showThree">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showThree"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


          <el-form-item label="其他危害行为" v-if="showFour">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showFour"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>

          <el-form-item label="自伤" v-if="showFive">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showFive"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>

          <el-form-item label="自杀未遂" v-if="showSix">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showSix"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


        </el-col>







      </el-row>



      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="心理调整">
            <el-select v-model="form.psychological" style="width: 100%">
              <el-option
                v-for="item in psychological"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="遵医行为">
            <el-select v-model="form.behavior" style="width: 100%">
              <el-option
                v-for="item in behavior"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">


        <el-col :lg="12" :xl="12">
          <el-form-item label="辅助检查">
            <el-input v-model="form.auxiliary"></el-input>
          </el-form-item>

        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="目前用药情况">
            <HButton @click="addMedicine()" type="add" size="mini">用药</HButton>
          </el-form-item>

            <el-table class="mt-20" :data="medicine" border stripe v-if="medicine.length>0">

              <el-table-column prop="medicineName" label="药物名称"  align="center">
              </el-table-column>
              <el-table-column prop="medicineEveryday" label="每日/次" align="center">
              </el-table-column>
              <el-table-column prop="medicineEveryTime" label="每次" align="center"> </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <HButton
                    @click="delMedicine(scope.$index)"
                    type="delete"
                    size="mini"
                  >删除</HButton
                  >
                </template>
              </el-table-column>
            </el-table>

        </el-col>
      </el-row>



      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="服药依从性">
            <el-select v-model="form.dependence" style="width: 100%">
              <el-option
                v-for="item in dependence"badness
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="药物不良反应">
            <el-select v-model="form.badness" style="width: 100%">
              <el-option
                v-for="item in badness"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="药物不良反应" v-if="[2].includes(form.badness)">
            <el-input v-model="form.badnessContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>








      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="此次随访分类">
            <el-select v-model="form.classify" style="width: 100%">
              <el-option
                v-for="item in classify"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="下一步管理措施">
            <el-select v-model="form.measure" style="width: 100%">
              <el-option
                v-for="item in measure"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>




      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="用药调整意见">
            <HButton @click="addmedicineOpinion()" type="add" size="mini">用药调整</HButton>
          </el-form-item>

          <el-table class="mt-20" :data="medicineOpinion" border stripe v-if="medicineOpinion.length>0">

            <el-table-column prop="medicineOpinionName" label="药物名称"  align="center">
            </el-table-column>
            <el-table-column prop="medicineOpinionday" label="每日/次" align="center">
            </el-table-column>
            <el-table-column prop="medicineOpinionTime" label="每次" align="center"> </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <HButton
                  @click="delmedicineOpinion(scope.$index)"
                  type="delete"
                  size="mini"
                >删除</HButton
                >
              </template>
            </el-table-column>
          </el-table>

        </el-col>
      </el-row>

      <el-divider content-position="left">转诊</el-divider>
      <el-row :gutter="20">


        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊机构">
            <el-input v-model="form.organization"></el-input>
          </el-form-item>
        </el-col>


      </el-row>



      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊科室">
            <el-input v-model="form.administrative"></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊联系人">
            <el-input v-model="form.linkman"></el-input>
          </el-form-item>
        </el-col>

      </el-row>





        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="转诊联系方式">
              <el-input v-model="form.contact"></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="12" :xl="12">
            <el-form-item label="此次随访分类">
              <el-select v-model="form.classification" style="width: 100%">
                <el-option
                  v-for="item in classification"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>


        </el-row>


      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访日期">
            <el-date-picker
              v-model="form.nextfollowDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="备注">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>





      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.followDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="居民签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>



        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>



      </el-row>

      <el-row type="flex" class="submitSty">
        <HButton type="add" @click="submit">提交</HButton>
      </el-row>
    </el-form>
    <medicineAdd ref="medicineAdd" @transData="medicineAdd"></medicineAdd>
    <medicineOpinionAdd ref="medicineOpinionAdd" @transData="medicineOpinionAdd"></medicineOpinionAdd>
  </div>
</template>

<script>
  import {
    sleepQualityList,
    sleepQuality,
    insight,
    oomatogenesis,
    somatopathy,
    assessment,
    cause,
    classification,
    classify,
    measure,
    dependence,
    badness,
  psychological,
  behavior,
  assimilateTarget,
  assimilate,
  kindergarten,
  organization,
  development,
  stoop,
  hearing,
  monthAge,
  Complexion,
  skin,
  neck,
  eye,
  umbilicus,
  twoFollow,
  guidance,
  result,
    dangerous
} from "@/api/followForms/psychogeny";
import { add } from '@/api/formData';
import medicineAdd from "./components/medicine-add";
  import medicineOpinionAdd from "./components/medicineOpinion-add";

export default {
  components: { medicineAdd,medicineOpinionAdd},
  data() {
    return {
      dangerous:dangerous,
      showOne:false,
      showTwo:false,
      showThree:false,
      showFour:false,
      showFive:false,
      showSix:false,
      sleepQualityList:sleepQualityList,
      oomatogenesis:oomatogenesis,
      insight:insight,
      sleepQuality:sleepQuality,
      somatopathy:somatopathy,
      assessment:assessment,
      medicineOpinion:[],
      medicine:[],
      showKindergarten:false,
      form: {
        ifReferral: 1,
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      twoFollowArr: [],
      guidanceArr: [],
      cause:cause,
      classification:classification,
      classify:classify,
      measure:measure,
      dependence:dependence,
      badness:badness,
      psychological:psychological,
      behavior:behavior,
      assimilateTarget:assimilateTarget,
      assimilate:assimilate,
      kindergarten:kindergarten,
      organization:organization,
      hearing:hearing,
      stoop:stoop,
      monthAge: monthAge,
      Complexion: Complexion,
      skin: skin,
      neck: neck,
      eye: eye,
      umbilicus: umbilicus,
      twoFollow: twoFollow,
      guidance: guidance,
      result: result,
      development:development
    };
  },
  created() {},
  methods: {
    seChangeDangerous(value){
      this.form.dangerous=value

      this.form.dangerous.forEach(item =>{

        switch (item) {
          case 1:
            this.showOne=true
            break;
          case 2:
            this.showTwo=true
            break;
          case 3:
            this.showThree=true
            break;
          case 4:
            this.showFour=true
            break;
          case 5:
            this.showFive=true
            break;
          case 6:
            this.showSix=true
            break;

        }

      })
    },
    submit() {
      var json = 	JSON.stringify(this.form)
      var data = {
        "id":this.form.id,
        "type":"CH42",
        "otherData":json
      }
      add(data).then(res=>{
        if (res.code == 'AA000000') {
          this.$message.success('提交成功')
        }
      })
    },

    delmedicineOpinion(index) {
      this.medicineOpinion.splice(index, 1);
    },
    addmedicineOpinion(){
      this.$refs.medicineOpinionAdd.openDialog();
    },
    medicineOpinionAdd(form) {
      this.medicineOpinion.push(JSON.parse(JSON.stringify(form)));
    },



    delMedicine(index) {
      this.medicine.splice(index, 1);
    },
    addMedicine(){
      this.$refs.medicineAdd.openDialog();
    },
    medicineAdd(form) {
      this.medicine.push(JSON.parse(JSON.stringify(form)));
    },
    seChangekindergarten(value){
      this.form.kindergarten=value
      this.form.kindergarten.forEach(item =>{
        if(item ==1){
        }
        if(item == 10){
          this.showKindergarten=true
        }

      })
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //两次随访间患病情况选择
    seChange1(value) {
      this.form.twoFollow = this.twoFollowArr.toString();
      this.select(value, this.twoFollow);
    },
    //指导选择
    seChange2(value) {
      this.form.guidance = this.guidanceArr.toString();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
